<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '测练详情',
	},
}
</route>

<template>
	<view class="page-book-details">
		<fly-navbar background-color="#F9F9F9" :leftText="detailsInfo?.book_name || '图书详情'" fixed />
		<view class="w-full" v-if="thisPage === 1 && detailsInfo">
			<view class="w-full px-[34rpx] mt-[43rpx] box-border">
				<view
					class="w-full px-[36rpx] py-[38rpx] rounded-[30rpx] paper-item"
					style="width: calc(100% - 70rpx)"
				>
					<view class="text-[#303030] text-[28rpx] font-bold">{{ detailsInfo.paper_name }}</view>
					<view class="text-[#5E5E5E] text-[22rpx] mt-[24rpx]">{{
						detailsInfo.paper_descript
					}}</view>
				</view>
			</view>
			<view class="w-full mt-[38rpx]">
				<text class="text-[#303030] text-[33rpx] px-[50rpx] box-border font-bold"
					>学生完成详情</text
				>
				<scroll-view scroll-x class="w-full whitespace-nowrap mt-[18rpx] px-[50rpx] box-border">
					<view
						class="h-full h-[36rpx] px-[18rpx] inline-flex justify-center items-center rounded-[18rpx] text-[22rpx] mr-[11rpx]"
						:style="{
							background: item.id === class_id ? '#2BA5E0' : '#F3F3F5',
							color: item.id === class_id ? '#fff' : '#919191',
						}"
						v-for="item in classList"
						:key="item.id"
						@tap="choseGrade(item.id)"
					>
						{{ item.class_name }}
					</view>
				</scroll-view>
				<view class="w-full px-[34rpx] mt-[15rpx] box-border">
					<view class="w-full pl-[34rpx] pr-[23rpx] box-border flex items-center">
						<text class="text-[#303030] text-[24rpx] py-[15rpx] inline-block w-[196rpx]">学生</text>
						<view class="flex flex-1 justify-between items-center">
							<view class="flex items-center py-[15rpx]" @tap="choseType(1)">
								<text
									:class="['text-[24rpx]', sort_type === 1 ? 'text-[#2BA5E0]' : 'text-[#303030]']"
									>测练日期</text
								>
								<image
									v-show="sort_type === 1"
									class="w-[12rpx] h-[16rpx] ml-[6rpx]"
									:src="baseImg + '/book/gdjh_pxBtn.png'"
								></image>
							</view>
							<view class="flex items-center py-[15rpx]" @tap="choseType(2)">
								<text
									:class="['text-[24rpx]', sort_type === 2 ? 'text-[#2BA5E0]' : 'text-[#303030]']"
									>测练用时</text
								>
								<image
									v-show="sort_type === 2"
									class="w-[12rpx] h-[16rpx] ml-[6rpx]"
									:src="baseImg + '/book/gdjh_pxBtn.png'"
								></image>
							</view>
							<view class="flex items-center py-[15rpx]" @tap="choseType(3)">
								<text
									:class="['text-[24rpx]', sort_type === 3 ? 'text-[#2BA5E0]' : 'text-[#303030]']"
									>测练结果</text
								>
								<image
									v-show="sort_type === 3"
									class="w-[12rpx] h-[16rpx] ml-[6rpx]"
									:src="baseImg + '/book/gdjh_pxBtn.png'"
								></image>
							</view>
						</view>
					</view>

					<view class="w-full px-[23rpx] py-[27rpx] rounded-[30rpx] box-border paper-item bg-white">
						<block v-if="detailsInfo.student_exam_record.length">
							<view
								class="w-full flex items-center mb-[27rpx] last:mb-0"
								v-for="item in detailsInfo.student_exam_record"
								:key="item.id"
							>
								<view class="flex items-center w-[196rpx]">
									<image
										class="w-[60rpx] h-[60rpx] border-2 border-solid border-[#D1D1D1] rounded-[50%]"
										:src="item.avatar || baseImg + '/user-default.png'"
									></image>
									<text
										class="w-[134rpx] inline-block pl-[16rpx] box-border text-[#303030] text-[22rpx]"
										>{{ item.user_name }}</text
									>
								</view>
								<view class="flex items-center flex-1 justify-between">
									<text class="text-[#303030] text-[22rpx]">{{ item.date }}</text>
									<text class="text-[#303030] text-[22rpx]">{{
										formatTime(item.answer_time, '分秒', false)
									}}</text>
									<view class="flex justify-center items-center">
										<image
											class="w-[27rpx] h-[27rpx] mr-[5rpx] last:mr-0"
											v-for="(cited, windex) in [1, 2, 3]"
											:key="cited"
											:src="
												item.star_number > windex
													? baseImg + '/book/book-star.png'
													: baseImg + '/book/book-star-gray.png'
											"
										></image>
									</view>
								</view>
							</view>
						</block>

						<no-page height="600rpx" v-else type="msg" title="暂无数据"></no-page>
					</view>
				</view>
			</view>
		</view>
		<no-page
			v-if="thisPage === 0 || (thisPage === 1 && !detailsInfo)"
			:type="type"
			:title="title"
			:btnTitle="btnTitle"
			@click="retry"
		></no-page>
	</view>
</template>

<script lang="ts" setup>
import { getPaperDetails, getTeachClass } from '@/service/book';
import { formatTime } from '@/utils';
import { toAuthPage } from '@/utils/jump';
import onShare from '@/hooks/useShare';
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const detailsInfo = ref(null);
const classList = ref([]);
const title = ref('');
const type = ref('msg');
const btnTitle = ref('重试');
const thisPage = ref(-1);
const query = ref(null);
const class_id = ref(0);
const sort_type = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
onLoad(options => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	if (options.id) {
		query.value = options;
	} else {
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		thisPage.value = 0;
		type.value = 'msg';
		title.value = '并未查询到试卷详情,请返回重试';
	}
});

onShow(() => {
	if (query.value.id) {
		uni.showLoading({ title: '加载中...' });
		getClass();
	}
});

const getClass = async () => {
	try {
		let res = await getTeachClass();
		if (res.status_code === 200) {
			if (!res.data.length) {
				thisPage.value = 0;
				type.value = 'msg';
				title.value = '并未查询到试卷详情,请返回重试';
			} else {
				classList.value = res.data;
				class_id.value = res.data[0].id;
				getDetailsInfo();
			}
		} else {
			uni.hideLoading();
			thisPage.value = 0;
			type.value = 'btn';
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '查询失败';
	}
};

const getDetailsInfo = async () => {
	try {
		const res = await getPaperDetails({
			paper_id: query.value.id,
			class_id: class_id.value,
			sort_type: sort_type.value,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			detailsInfo.value = res.data;
			uni.showShareMenu();
		} else {
			uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	if (!userInfo.value.school_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'switchTab', url: '/pages/index/index' });
		return;
	}
	uni.showLoading({ title: '加载中...' });
	getClass();
};

const choseGrade = (id: number) => {
	class_id.value = id;
	uni.showLoading({ title: '加载中...' });
	getDetailsInfo();
};

const choseType = (type: number) => {
	sort_type.value = type;
	uni.showLoading({ title: '加载中...' });
	getDetailsInfo();
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
</style>

<style lang="scss" scoped>
.paper-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgba(0, 0, 0, 0.03),
		0rpx 5rpx 21rpx 0rpx rgba(0, 0, 0, 0.07);
}
</style>
